<template>
	<view class=" w-full bg-base my-container">
		<view class="">
			<view class="my-animate">
				css
			</view>
			<view class="text-center child-box">
				<view class="">css-child1</view>
				<view class="">css-child2</view>
				<view class="">css-child3</view>
			</view>
		</view>
		<view :class="[value?'my-transition-add':'']" class="mt-10 bg-accent my-transition" @click="value=!value">my-transition</view>
	
	
	<view :class="{classA:!value}" class="mt-10 bg-error my-transition" >my-transition</view>
	{{value}}</view>
</template>

<script>
	export default {
		data() {
			return {
				value: false
			}
		},
		methods: {

		}
	}
</script>

<style lang="less">
	@primary-color: #99CC66;
	@font-color: white;
	@border-color: #000;

	.my-container {
		// position: relative;
	}

	.my-transition {
		margin-left: 10px;
		// transition: all 1s ease-out; /*所有属性都有变换效果，持续1秒*/
		transition: margin-left 1s ease-in-out .2s;
		/* 变换效果时长2秒，时间曲线函数ease-in-out，延迟0.5秒执行 */
	}

	.my-transition-add {
		margin-left: 100px;
	}
.classA{
	color: white;
	margin-left: 100px;
}
	.my-animate {
		position: relative;
		z-index: 5;
		height: 50px;
		width: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: @primary-color;
		color: @font-color;
		padding: 10px;


		-webkit-transition-property: width;
		transition-property: padding, width, height, background-color;

		-webkit-transition-duration: 1s;
		transition-duration: 1s;

		-webkit-transition-timing-function: ease;
		transition-timing-function: ease;

		// -webkit-transition-delay: 2s;
		// transition-delay: 2s;
	}

	.my-animate:hover {
		display: flex;
		width: 200px;
		height: 100px;
		background-color: #18BC37;
	}

	.my-animate:hover+.child-box {
		display: block;

	}

	.child-box {
		display: none;
		position: absolute;
		top: 60px;
		z-index: 10;
		background-color: @primary-color;
	}

	.my-child {}
</style>
